<template>
  <div>
    <a-row>
      <a-col :span="12">
        <a-card :bordered="false">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row :gutter="24">
                <a-col :xl="7" :lg="7" :md="8" :sm="24">
                  <a-form-item label="登录账号">
                    <a-input placeholder="请输入登录账号" v-model="queryParam.loginName"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="名字">
                    <a-input placeholder="请输入名字" v-model="queryParam.name"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :xl="7" :lg="7" :md="8" :sm="24">
                  <a-form-item label="联系方式">
                    <a-input placeholder="请输入联系方式" v-model="queryParam.mobile" />
                  </a-form-item>
                </a-col>
                <!--                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                      <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  </span>
                </a-col>-->
              </a-row>
            </a-form>
          </div>
          <!-- 查询区域-END -->
          <!-- 操作按钮区域 -->
          <div class="table-operator" style="text-align: right;">
            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            <a-button @click="syncSiteData" type="primary">将“曹操跑腿”系统中的代理商用户同步至"匠心汇"系统(同步之前会先检测分站用户信息)<a-icon type="double-right" /></a-button>
          </div>
          <!-- table区域-begin -->
          <div>
            <a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="sid" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap" @change="handleTableChange">
            </a-table>
          </div>

        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card :bordered="false">

          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="siteSearchQuery">
              <a-row :gutter="24">
                <a-col :xl="7" :lg="7" :md="8" :sm="24">
                  <a-form-item label="登录账号">
                    <a-input placeholder="请输入登录账号" v-model="siteQueryParam.username"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="名字全称">
                    <a-input placeholder="名字全称" v-model="siteQueryParam.realname" />
                  </a-form-item>
                </a-col>
                <a-col :xl="7" :lg="7" :md="8" :sm="24">
                  <a-form-item label="联系方式">
                    <a-input placeholder="联系方式" v-model="siteQueryParam.phone" />
                  </a-form-item>
                </a-col>
                <!--                  <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">

                  </span>
                  </a-col>-->
              </a-row>
            </a-form>
          </div>
          <!-- 操作按钮区域 -->
          <div class="table-operator" style="text-align: right; height:40px;">
            <!--   该区域为占位区域，如果需要操作按钮，可以在这个区域写   -->
            <a-button type="primary" @click="siteSearchQuery" icon="search">查询</a-button>
          </div>
          <!-- table区域-begin -->
          <div>
            <a-table ref="siteTable" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="siteColumns" :dataSource="siteData" :pagination="sitePagination" :loading="siteLoading" class="j-table-force-nowrap" @change="handleSiteTableChange">
            </a-table>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-modal :title="modal.modalTitle" :visible="modal.siteTransferFlag" :confirm-loading="modal.confirmLoading" @ok="handleOk" @cancel="handleCancel" cancelText="关闭">
      <p>{{ modal.modalText }}</p>
      <div style='color:red;'>{{modal.modalTextDown}}</div>
    </a-modal>
  </div>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'SiteUserList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    //SiteModal
  },
  data() {
    return {
      description: '分站用户迁移列表',
      // 表头
      columns: [
        {
          title: "”曹操跑腿”系统内代理商（分站）数据",
          children: [
            {
              title: '序号',
              dataIndex: '',
              key: 'rowIndex',
              width: 60,
              align: "center",
              customRender: function (t, r, index) {
                return parseInt(index) + 1;
              }
            },
            {
              title: '登录账号',
              align: "center",
              dataIndex: 'loginName',
              width: "50px"
            },
            {
              title: '原表分站id',
              align: "center",
              dataIndex: 'agentSid',
              width: "80px"
            },
            {
              title: '名字',
              align: "center",
              dataIndex: 'name',
              width: "100px"
            },
            {
              title: '联系方式',
              align: "center",
              dataIndex: 'mobile',
              width: "100px"
            },
            {
              title: '状态',
              align: "center",
              dataIndex: 'status',
              width: "100px",
              customRender: (val, row, index) => {
                return val == 0 ? "正常" : (val == 1 ? "冻结" : "限制登录")
              }
            },
            {
              title: '性别',
              align: "center",
              dataIndex: 'sex',
              width: "100px",
              customRender: (val, row, index) => {
                return val == 1 ? "男" : (val == 0 ? "女" : "")
              }
            },
            {
              title: '是否删除',
              align: "center",
              dataIndex: 'isDelete',
              width: "30px",
              customRender: (val, row, index) => {
                return val == 0 ? "正常" : (val == 1 ? "已删除" : "")
              }
            }
          ]
        }
      ],
      modal: {
        modalTitle: '',
        siteTransferFlag: false,
        confirmLoading: false,
        modalText: '',
        modalTextDown: ''
      },
      // 右侧表头
      siteColumns: [
        {
          title: "”匠心汇”系统内分站（代理商）用户数据",
          children: [
            {
              title: '序号',
              dataIndex: '',
              key: 'rowIndex',
              width: 60,
              align: "center",
              customRender: function (t, r, index) {
                return parseInt(index) + 1;
              }
            },
            {
              title: '登录账号',
              align: "center",
              dataIndex: 'username',
              width: "50px"
            },
            {
              title: '代理商（新库中代理商id）',
              align: "center",
              dataIndex: 'siteId',
              width: "80px"
            },
            {
              title: '名字',
              align: "center",
              dataIndex: 'realname',
              width: "100px"
            },
            {
              title: '联系方式',
              align: "center",
              dataIndex: 'phone',
              width: "100px"
            },
            {
              title: '状态',
              align: "center",
              dataIndex: 'status_dictText',
              width: "30px"
            },
            {
              title: '性别',
              align: "center",
              dataIndex: 'sex_dictText',
              width: "30px"
            },
            {
              title: '是否删除',
              align: "center",
              dataIndex: 'delFlag_dictText',
              width: "30px"
            },
            {
              title: '迁移时间',
              align: "center",
              dataIndex: 'createTime',
              width: "8px"
            }
          ]
        }
      ],
      url: {
        list: "/dataTransfer/site/agentUser/list",
        siteList: "/dataTransfer/site/siteUser/list",
        transfer: "/dataTransfer/site/siteUser/transfer"
      },
      // “匠心汇”  新库中的的数据集合
      siteData: [],
      dictOptions: {},
      superFieldList: [],
      superSiteFieldList: [],
      siteQueryParam: {
        username: '',
        realname: '',
        phone: ''
      },
      sitePagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      siteLoading: false,
    }
  },
  created() {
    this.getSuperFieldList();
    this.getSiteFieldList();
    this.getSiteList();
  },
  computed: {
    // importExcelUrl: function(){
    //   return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    // },
  },
  methods: {
    initDictConfig() {
    },
    getSuperFieldList() {
      let fieldList = [];
      fieldList.push({ type: 'string', value: 'loginName', text: '登录账号', dictCode: '' })
      fieldList.push({ type: 'string', value: 'agentSid', text: '原表分站id', dictCode: '' })
      fieldList.push({ type: 'string', value: 'name', text: '名字', dictTable: '', dictText: '', dictCode: '' })
      fieldList.push({ type: 'string', value: 'mobile', text: '联系方式', dictCode: '' })
      fieldList.push({ type: 'string', value: 'status', text: '状态（0正常，1冻结，2限制登录）', dictCode: '' })
      fieldList.push({ type: 'string', value: 'sex', text: '性别', dictCode: '' })
      fieldList.push({ type: 'String', value: 'isDelete', text: '是否删除', dictCode: '' })
      this.superFieldList = fieldList
    },
    getSiteFieldList() {
      let siteFieldList = [];
      siteFieldList.push({ type: 'string', value: 'username', text: '登录账号', dictCode: '' })
      siteFieldList.push({ type: 'string', value: 'orgCode', text: '代理商（新库中代理商id）', dictCode: '' })
      siteFieldList.push({ type: 'string', value: 'realname', text: '名字', dictTable: '', dictText: '', dictCode: '' })
      siteFieldList.push({ type: 'string', value: 'phone', text: '联系方式', dictCode: '' })
      siteFieldList.push({ type: 'string', value: 'status', text: '状态（1正常，2冻结）', dictCode: 'user_status' })
      siteFieldList.push({ type: 'string', value: 'sex', text: '性别', dictCode: 'sex' })
      siteFieldList.push({ type: 'list_multi', value: 'delFlag', text: '是否关站', dictCode: 'mk_whether' })
      siteFieldList.push({ type: 'string', value: 'createTime', text: '数据迁移时间', dictCode: '' })
      this.superSiteFieldList = siteFieldList
    },
    getSiteList() {
      const self = this;
      self.siteQueryParam.pageNo = self.sitePagination.current;
      self.siteQueryParam.pageSize = self.sitePagination.pageSize;
      self.$http.get(self.url.siteList, {
        params: self.siteQueryParam
      }).then(res => {
        if (res.success) {
          self.siteData = res.result.records;
          self.sitePagination.total = res.result.total
        }
      })
    },
    handleSiteTableChange(pagination, filters, sorter) {
      this.sitePagination = pagination;
      this.siteLoading = true;
      this.getSiteList();
      this.siteLoading = false;
    },
    syncSiteData() {
      const self = this;
      self.modal.modalTitle = "分站用户数据迁移";
      self.modal.modalText = "确定要将“曹操跑腿”系统中代理商（分站）用户信息同步至“匠心汇”系统吗？ ";
      self.modal.modalTextDown = "注意：同步之前会检测代理商（分站）用户信息：如果分站用户信息已同步至“匠心汇”，但是分站用户信息被修改，此时，同步的过程中会更新“匠心汇”系统中的分站用户信息；如果“曹操跑腿”系统中的分站用户是新建的，“匠心汇”系统中还没有该分站用户的信息，此时会直接将该分站服务商的信息同步至“匠心汇”系统。";
      self.modal.confirmLoading = false;
      self.modal.siteTransferFlag = true;
    },
    syncDataing() {
      const self = this;
      self.$http.post(self.url.transfer).then(res => {
        console.log("transfer---->   ", res)
        if (res.success) {
          self.modal.confirmLoading = false;
          self.modal.modalText = res.result + "“曹操跑腿”系统中代理商（分站）用户数据已全部同步至“匠心汇”系统";
          self.modal.modalTextDown = "5秒钟后，将自动关闭，也可点击“确定”或“关闭”按钮手动关闭";
          self.getSiteList();
          // 关闭对话框
          setTimeout(() => {
            self.modal.siteTransferFlag = false;
          }, 5000);
        }
      })
    },
    handleCancel(e) {
      this.modal.siteTransferFlag = false;
    },
    handleOk(e) {
      this.modal.confirmLoading = true;
      this.syncDataing();
    },
    siteSearchQuery() {
      this.getSiteList();
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>